<template>
    <div class="box">
        <biaoti title="分类"></biaoti>
        <van-row class="main">
            <van-col span="6" style="height: 100%;overflow: auto;">
                <van-sidebar v-model="active">
                    <van-sidebar-item :title="v.cat_name" v-for="(v, i) in list" :key="i" />
                </van-sidebar>
            </van-col>
            <van-col span="17" style="height: 100%;overflow: auto;">
                <div class="" v-for="(v, i) in list[active]?.children" :key="i">
                    {{ v.cat_name }}
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(val, index) in v.children" :key="index" @click="addFun(val.cat_name)">
                            <van-image
                                :src="val.cat_icon ? val.cat_icon : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                                <p>{{ val.cat_name }}</p>
                        </van-grid-item>
                    </van-grid>
                </div>


            </van-col>

        </van-row>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import biaoti from '@/components/biaoti.vue';
import { categoriesApi } from '@/api/api';
const active = ref(0);
let list = ref("")
const getlist = () => {
    categoriesApi().then(res => {
        list.value = res.data.message
    })
}
getlist()


import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const addFun=(name)=>{
    router.push({path:'/seacher',query:{name:name}})
}
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .main {
        display: flex;
        flex: 1;
        overflow: hidden;
    }
}
</style>